<template>
  <div class="userlogin-wrap">
		<div class="userform-box userregister">
			<h2>找回密码<span style="font-size: 50%; text-align: left;">找回密码之前，请确定您已进行手机号码绑定，否则请联系人工客服进行处理.</span></h2>
			<img
        v-show="beer === 0"
        class="userlogin-img userlogin-img1"
        src="~/assets/images/login1.png">
			<img
        v-show="beer === 1"
        class="userlogin-img userlogin-img2"
        src="~/assets/images/login2.png">
			<img
        v-show="beer === 2"
        class="userlogin-img userlogin-img3"
        src="~/assets/images/login3.png">
			<form class="layui-form">
				<input @focus="beer=1" type="repassword" name="mobile" class="layui-input" placeholder="手机号码" lay-verify="phone" maxlength="15" style="padding-right: 110px;">
				<div style=" position: absolute; top: 67px; right: 21px;">
					<button class="layui-btn layui-btn-sm" type="button" id="btncode">获取验证码</button>
				</div>
				<input @focus="beer=2" type="text" name="code" class="layui-input" placeholder="短信验证码" lay-verify="required" maxlength="6">
				<input @focus="beer=1" type="text" name="username" class="layui-input" placeholder="您的帐号" lay-verify="required">
				<input @focus="beer=2" type="password" name="password" class="layui-input" placeholder="新密码" lay-verify="required">
				<input @focus="beer=2" type="password" name="repassword" class="layui-input" placeholder="确认密码" lay-verify="required">
				<button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit="" lay-filter="findpwd">立即找回</button>
			</form>
			<p class="common-login-forget"><span>已有账号？<nuxt-link to="/themes4">登录</nuxt-link></span><span>&nbsp;-&nbsp;
        <nuxt-link to="/register4">注册</nuxt-link></span><nuxt-link to="/">返回首页</nuxt-link></p>
		</div>
	</div>
</template>
<script>
export default {
  data() {
    return {
      beer: 0,
    }
  }
}
</script>
<style lang="scss" scoped>
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style1/common.css';
// @import 'assets/style/style1/openlogin.css';
// @import 'assets/style/style1/style.css';
// @import 'assets/style/style1/font_1451715_0505c2bxv7b7.css';
// @import 'element-ui/lib/theme-chalk/index.css';
.userlogin-wrap {
  display: block;
  background: url(~/assets/images/login-bg.jpg) no-repeat;
  background-size: 100% 100%;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .userform-box {
    position: absolute;
    width: 320px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    margin-left: -160px;
    margin-top: -200px;
    z-index: 100;
    border-radius: 3px;
    h2 {
      font-size: 16px;
      font-weight: 800;
      color: #333;
      margin-bottom: 20px;
    }
    .userlogin-img {
      width: 120px;
      height: 95px;
      position: absolute;
      left: 50%;
      top: 0;
      display: block;
      &-1 {
        margin-top: -77px;
        margin-left: -60px;
      }

      &-2 {
        height: 114px !important;
        margin-top: -86px;
      }
      &-3 {
        width: 104px !important;
        height: 84px !important;
        margin-left: -52px;
        margin-top: -60px;
      }
    }

    .layui-input {
      margin-bottom: 10px;
    }
    .common-login-forget {
      font-size: 12px;
      line-height: 40px;
      color: #999;
      a {
        color: #1E9FFF;
      }
    }

  }
}
</style>
